<template>
	<bottom-popup :showType="giftShow" :headerType="false" bgColor="#222222" @cancel="giftCancel">
		<view class="live-gift-box" slot="content">
			<view class="live-gift-header">礼物</view>
			<scroll-view scroll-x="true" class="gift-scrool" :scroll-into-view="giftScroolItem">
				<view class="gift-scrool-item " v-for="(v, i) in giftList" :key="i" :id="'item' + i" :class="i === giftInx ? 'item-ativer' : ''" @click="giftBtn(i)">
					<view class="df-col" style="height: 100%;width: 100%;justify-content: space-between;">
						<view class="item-top">
							<view class="df-cen"><image :src="$util.img(v.gimg)" mode="" class="gift-img"></image></view>
							<view class="gift-name df-cen">{{ v.gname }}</view>
						</view>
						<view class="gift-btn df-cen bg-orange-red" @click="giftBtnFn(v)" v-if="i === giftInx">赠送</view>
						<view class="gift-nianfei df-col-cen" v-else>
							<text v-if="Number(v.gprice) == 0">限时免费</text>
							<text v-else>{{ v.gprice }}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</bottom-popup>
</template>

<script>
export default {
	data() {
		return {
			giftInx: null,
			giftScroolItem: ''
		}
	},
	props: {
		giftShow: {
			type: Boolean,
			default: false
		},
		giftList: {
			type: Array,
			default: () => {
				return []
			}
		}
	},
	methods: {
		giftBtn(i) {
			if (i === 0) {
				this.giftScroolItem = 'item0'
			} else if (i === this.giftList.length - 1) {
				this.giftScroolItem = 'item' + i
			} else {
				let inx = i - 1
				this.giftScroolItem = 'item' + inx
			}
			this.giftInx = i
		},
		giftCancel() {
			this.$emit('giftCancelCall')
		},
		giftBtnFn(item) {
			this.$emit('giftCall', item)
		}
	},
	mounted() {}
}
</script>

<style lang="scss">
.live-gift-box {
	background: #252524;
	padding: 30rpx 20rpx;
	border-top-right-radius: 20rpx;
	border-top-left-radius: 20rpx;
	.live-gift-header {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
		opacity: 0.5;
		margin-bottom: 30rpx;
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
	}
	.gift-scrool {
		white-space: nowrap;
		width: 100%;
		.gift-scrool-item {
			position: relative;
			display: inline-block;
			width: 160rpx;
			height: 200rpx;
			margin-right: 20rpx;
			align-items: center;
			.item-top {
				padding-top: 10rpx;
			}
		}
		.item-ativer {
			background: #2d2d2f;
			border-radius: 20rpx;
		}
		.gift-img {
			width: 78rpx;
			height: 78rpx;
		}
		.gift-name {
			margin-top: 10rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
		}
		.gift-btn {
			width: 100%;
			height: 50rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
			border-bottom-right-radius: 20rpx;
			border-bottom-left-radius: 20rpx;
		}
		.gift-nianfei {
			height: 50rpx;
			font-size: 18rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
			opacity: 0.55;
		}
	}
}
</style>
